<style>
  #enroll-container {
    position: fixed;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    top: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #enroll-content {
    display: none;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    border-radius: 5px;
    position: relative;
    padding: 4%;
  }

  #enroll-close {
    width: 28px;
    height: 28px;
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
  }

  .enroll-left {
    border-right: 1px #eee solid;
    padding: 0 80px 0 20px;
  }

  .enroll-left > h3 {
    text-align: center;
  }

  #enroll-title {
    color: #93412C;
    font-size: 26px;
    font-family: Source Han Sans CN;
    font-weight: bold;
  }

  .enroll-form-item {
    display: flex;
    width: 100%;
    align-items: center;
    padding: 15px 0px 0;
  }

  .enroll-form-item > div:nth-child(1) {
    flex: .4;
    font-size: 1.05rem;
  }

  .enroll-form-item > div:nth-child(2) {
    flex: .7;
  }

  .enroll-form-item > div:nth-child(2) > input {
    border: 1px #eee solid;
    border-radius: 0px;
    background: #FFFFFF;
    width: 100%;
    padding-left: 8px;
    line-height: 35px;
    width: 250px;
  }

  .select_box {
    position: relative;
    font-size: 14px;
    text-align: left;
    width: 250px;
    background: #FFFFFF;
    border-radius: 0px;
  }
  .select_box > ul {
    position: absolute;
    border-radius: 0px;
    left: 0;
    top: 38px;
    width: 250px;
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
    border-bottom: 1px solid #eee;
    background: #fff;
    overflow: hidden;
    display: none;
    background: #eee;
    z-index: 99999;
  }
  .select_box > ul > li {
    display:block;
    height: 33px;
    width: 250px;
    padding-left:10px;
    background:#FFFFFF;
    overflow:hidden;
    line-height:33px;
    font-size: 15px;
    cursor:pointer;
    color: #757575;
  }
  .select_box > ul .disabled {
    color: #ccc;
  }

  #style-type {
    color: #333;
    padding-left: 8px;
    display: block;
    font-size: 16px;
    line-height: 0px;
    width: 100%;
    height: 38px;
    overflow:  hidden;
    border: 1px #eee solid;
    border-radius: 0px;
    background: url(https://ujia-img.oss-cn-shenzhen.aliyuncs.com/changehome/common/pc/commonEnroll/arrow-bottom.png) no-repeat right 10px center;
    background-size: 10px;"
  }

  #enroll-time {
    color: #333;
    padding-left: 8px;
    display: block;
    font-size: 16px;
    line-height: 0px;
    width: 100%;
    height: 38px;
    overflow: hidden;
    border: 1px #eee solid;
    border-radius: 0px;
    background: url(https://ujia-img.oss-cn-shenzhen.aliyuncs.com/changehome/common/pc/commonEnroll/arrow-bottom.png) no-repeat right 10px center;
    background-size: 10px;"
  }

  .enroll-submit {
    display: flex;
    flex-direction: column;
  }

  .enroll-submit > span {
    color: #93412C;
    font-size: .85rem;
    margin-bottom: 5px;
    margin-top: 20px;
  }

  #enroll-appointment {
    border: none;
    margin-top: 30px;
    height: 42px;
    line-height: 42px;
    font-size: 1.2rem;
    background: #93412C;
    color:#FFFFFF;
    border-radius: 5px;
    width: 60%;
  }

  .enroll-right {
    padding: 0 10px 0 80px !important;
  }

  .enroll-right > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .enroll-right > div > img {
    margin: 15px 0;
    width: 100%;
  }

  .enroll-right-desc {
    font-size: 1rem;
    width: 100%;
    color: #333;
    text-align: center;
    margin: 0 auto;
  }

  .enroll-right-tel {
    color: #222;
    width: 100%;
    letter-spacing: 2px;
    font-size: 1.5rem;
    margin-top: 10px;
  }

  .right-container-appointment {
    width: 900px;
    height: 360px;
    display: flex;
    justify-content: space-between;
    background: #FFFFFF;
  }

  .right-container-appointment-left {
    margin-left: 0px;
    display: flex;
    flex-direction: column;
    width: 400px;
    max-width: 400px;
  }

  .right-container-appointment-left-title {
    color: #93412C;
    font-size:26px;
    font-weight: bold;
    text-align: center;
  }

  .right-container-appointment-left-subtitle {
    margin-top: 5px;
    color: #93412C;
    font-size: 18px;
    text-align: center;
    font-family: Source Han Sans CN;
  }

  .right-container-appointment-left-form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-left: 40px;
    margin-top: 10px;
  }

  .right-container-appointment-left-form > div:nth-child(1) {
    margin-top: 20px;
  }

  .right-container-appointment-left-form > div {
    margin-top: 15px;
  }

  .right-container-appointment-left-form > div > label {
    color: #333333;
  }

  .right-container-appointment-left-form > div > input {
    padding: 4px 6px;
  }

  .right-container-appointment-left-tip {
    margin-top: 45px;
    color: #93412C;
    font-size: 14px;
    text-align: center;
  }

  .right-container-appointment-center {
    position: relative;
    margin-top: 10px;
  }

  .right-container-appointment-center-line {
    width: 1px;
    height: 350px;
    background: #cccccc;
  }

  .right-container-appointment-center-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    position: absolute;
    left: -40px;
    top: 40%;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #93412C;
    color: #FFFFFF;
  }

  .right-container-appointment-center-btn > span {
    width: 38px;
    font-size: 18px;
    font-weight: 400;
  }

  .right-container-appointment-right {
    margin-top: 22px;
    padding-right: 15px;
    padding-top: 20px;
  }
  .right-container-appointment-right > img {
    width: 286px;
  }

</style>
<section id="enroll-container">
  <div id="enroll-content">
    <img id="enroll-close" src="https://ujia-img.oss-cn-shenzhen.aliyuncs.com/changehome/common/pc/commonEnroll/close.png" />
    <div class="enroll-left">
      <h3 id="enroll-title">获取设计方案</h3>
      <div class="enroll-form-item">
        <div><span style="color: #B94047">*</span>您的姓名：</div>
        <div>
          <input id="enroll-username" type="text" placeholder="请填写您的姓名/称呼" >
        </div>
      </div>
      <div class="enroll-form-item">
        <div><span style="color: #B94047">*</span>手机号码：</div>
        <div>
          <input id="enroll-mobile" type="tel" placeholder="请填写您的手机号码" >
        </div>
      </div>
      <div class="enroll-form-item">
        <div>&nbsp;楼盘名称：</div>
        <div>
          <input id="enroll-building" type="text" placeholder="请填写您的楼盘名称" >
        </div>
      </div>
      <div class="enroll-form-item">
        <div>&nbsp;建筑面积：</div>
        <div>
          <input id="enroll-area" type="number" placeholder="请填写您的房屋面积（m²）" >
        </div>
      </div>
      <div class="enroll-form-item">
        <div>&nbsp;房屋户型：</div>
        <div>
          <input id="enroll-house" type="text" placeholder="例如3室2厅2卫" >
        </div>
      </div>
      <div class="enroll-form-item enroll-style">
        <div>&nbsp;风格选择：</div>
        <div>
          <div class="select_box">
            <input id="style-type" type="text" value="现代" readonly="readonly">
            <ul class="select_ul">
              <li>现代</li>
              <li>北欧</li>
              <li>美式</li>
              <li>新中式</li>
            </ul>
          </div>
        </div>
      </div>
      <div class="enroll-form-item">
        <div>&nbsp;致电时间：</div>
        <div>
          <div class="select_box">
            <input id="enroll-time" type="text" value="立即联系（半小时内）" readonly="readonly">
            <ul class="select_ul">
              <li id="time-now">立即联系（半小时内）</li>
              <li id="time-morning">上午（09:00-12:00）</li>
              <li id="time-noon">中午（12:00-14:00）</li>
              <li id="time-afternoon">下午（14:00-18:00）</li>
              <li id="time-evening">晚上（18:00-20:00）</li>
            </ul>
          </div>
        </div>
      </div>
      <div class="enroll-form-item enroll-submit">
        <button id="enroll-appointment">立即预约</button>
        <span>*为了您的权益，您的隐私将被严格保密</span>
      </div>
    </div>
    <div class="enroll-right">
      <div>
        <img class="img-responsive" src="https://ujia-img.oss-cn-shenzhen.aliyuncs.com/beauthome/right/pc/fa.gif">
      </div>
    </div>
    <div class="right-container-appointment">
      <div class="right-container-appointment-left">
        <span class="right-container-appointment-left-title">提前算一算，美学整配需要多少钱</span>
        <span class="right-container-appointment-left-subtitle">- 今天您是第126位业主获取报价 -</span>
        <div class="right-container-appointment-left-form">
          <div>
            <label><span style="visibility: hidden">*</span>楼盘名称：</label>
            <input id="right-building" placeholder="请填写您的楼盘名称" />
          </div>
          <div>
            <label><span style="visibility: hidden">*</span>房屋户型：</label>
            <input id="right-house" placeholder="例如3室2厅2卫" />
          </div>
          <div>
            <label><span style="visibility: hidden">*</span>建筑面积：</label>
            <input id="right-area" placeholder="" style="width: 130px" /><span style="color: #333333;margin-left: 5px">㎡</span>
          </div>
          <div>
            <label><span style="color: #B94047">*</span>手机号码：</label>
            <input id="right-mobile" placeholder="请填写您的手机号码" style="" />
          </div>
        </div>
        <p class="right-container-appointment-left-tip">*为了您的权益，您的隐私将被严格保密</p>
      </div>
      <div class="right-container-appointment-center">
        <div class="right-container-appointment-center-line"></div>
        <div class="right-container-appointment-center-btn">
          <span>开始计算</span>
        </div>
      </div>
      <div class="right-container-appointment-right">
        <img src="https://ujia-img.oss-cn-shenzhen.aliyuncs.com/beauthome/bottom/pc/right.png" />
      </div>
    </div>
  </div>
</section>
<script>
    $('#enroll-container').hide();

    $('#style-type').click(function(){
        var thisInput = $(this);
        var thisUl = $(this).parent().find("ul");
        $('.select_ul').slideUp("fast");
        if(thisUl.css("display") == "none"){
            if(thisUl.height()>200){
                thisUl.css({height:"200"+"px","overflow-y":"scroll" })
            }
            thisUl.slideDown("100");
            thisUl.hover(function(){},function(){thisUl.fadeOut("100");});
            thisUl.find("li").click(function(){
                if ($(this).attr("class").indexOf("disabled") >= 0){
                    return false;
                }
                thisInput.val($(this).text());
                thisUl.slideUp("100");
            }).hover(function(){$(this).addClass("hover");
            },function(){$(this).removeClass("hover");});
        }else{
            thisUl.slideUp("fast");
        }
    });

    $("#enroll-time").click(function(){
        var thisInput = $(this);
        var thisUl = $(this).parent().find("ul");
        $('.select_ul').slideUp("fast");
        if(thisUl.css("display") == "none"){
            if(thisUl.height()>200){
                thisUl.css({height:"200"+"px","overflow-y":"scroll" })
            }
            thisUl.slideDown("100");
            thisUl.hover(function(){},function(){thisUl.fadeOut("100");});
            thisUl.find("li").click(function(){
                if ($(this).attr("class").indexOf("disabled") >= 0){
                    return false;
                }
                thisInput.val($(this).text());
                thisUl.slideUp("100");
            }).hover(function(){$(this).addClass("hover");
            },function(){$(this).removeClass("hover");});
        }else{
            thisUl.slideUp("fast");
        }
    });
</script>
